<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户信息</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/iview/dist/iview.min.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
		<style scoped>
			/* 在此定义当前页面css */
			@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
			@import url("//unpkg.com/iview/dist/styles/iview.css");
			.time{
				font-size: 15px;
				font-weight: bold;
			}
			.content{
				padding-left: 5px;
			}
		</style>
		
		<style type="text/css">
			.el-header{
				background-color: #E0EEEE; 
				color: 	#000000;
				text-align: center;
				height: 400px;
			  }
			  #linegray{
				  border: 1px solid #333333;
				  width: 25%;
			  }
			  #boxdiv{
				  width:70%;
				  border: 1px solid #333333;
				  float: right;
			  } 
			  p{
				  font-size: 15px;
			  }
			.input-with-select .el-input-group__prepend {
				background-color: #fff;
			}
			.el-cascader{
				width:250px;
			}
			.el-button{
				font-size: 15px;
				float: right;
			}
			.el-form-item{
				width:300px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 搜索跳转（未完成 ） -->
			<!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
			  <el-menu-item index="1">全部客户</el-menu-item>
			  <el-menu-item index="2">潜在客户</el-menu-item>
			  <el-menu-item index="3">签约客户</el-menu-item>
			  <el-menu-item index="4">重复购买</el-menu-item>
			  <el-menu-item index="5">失效客户</el-menu-item>
			</el-menu>
			<div class="line"></div> -->
			
			<div style="margin-top: 15px;">
					<div class="block">
						<template>
					   <el-select v-model="value7" placeholder="请选择" @change="getValue">
						<el-option-group v-for="group in options3" :key="group.label" :label="group.label">
						  <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-option-group>
					  </el-select>
						</template>
						
						<el-input clearable placeholder="请输入内容" style="width:50%" v-model="input5" class="input-with-select">
						<el-button slot="append" icon="el-icon-search" @click="inputCustname">客户名称</el-button>
						</el-input>
				</div>
			</div>
			<div>
			<br/>
				<span style="font-size:15px">客户基本信息（共{{pagedata.total}}条）</span>
				<el-button type="primary" icon="el-icon-loading"  @click="internalSea">公海</el-button>
				<el-button type="primary" icon="el-icon-circle-plus-outline" @click="addCustomer">新建客户</el-button>
			</div>
			<br />
			
			<!-- 新建客户 -->
			<el-dialog title="新建客户"  :visible.sync="dialogFormVisible">
			<el-form :model="ruleForm" :key="item.value" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-row>
				<el-col :span="12">
					<el-form-item label="客户名称" prop="name">
					<el-input clearable v-model="ruleForm.name"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="客户简称" prop="shortname">
					<el-input clearable v-model="ruleForm.shortname"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="12">
					<!-- 性别字典表1004-->
					<el-form-item label="性别" prop="sex">
					<!-- <el-radio-group v-model="ruleForm.sex"> -->
					<!-- <el-radio v-for="item in sexes" :label="item.label" :value="item.value"></el-radio> -->
						<el-radio v-model="ruleForm.sex" label="1005">男</el-radio>
						<el-radio v-model="ruleForm.sex" label="1006">女</el-radio>
					<!-- </el-radio-group> -->
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<!-- 1114代表客户来源字典表 -->
					<el-form-item label="客户来源" prop="source">
						<el-select v-model="ruleForm.source" placeholder="请选择客户来源">
						<el-option v-for="item in sour" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>		  
		  
			<el-row>
				<el-col :span="12">
					<el-form-item label="移动电话" prop="phone">
					<el-input clearable v-model.number="ruleForm.phone"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="电子邮箱" prop="email">
					<el-input clearable v-model.number="ruleForm.email"/>
					</el-form-item>
					</el-col>
			</el-row>
			 
			 <el-row>
				<el-col :span="12">
				<el-form-item label="所有者:" prop="client" required>
						<el-select v-model="ruleForm.client" @clear="uitemvto()" clearable filterable="" remote="" reserve-keyword placeholder="请输入关键词" :remote-method="uidremoteMethod" :loading="uidloading">
							<i slot="prefix" class="el-input__icon el-icon-search"></i>
							<el-option  v-for="item in uitemv" :key="item.value" :label="item.label" :value="item.value"> 
						</el-option>
						</el-select>
				</el-form-item>
				</el-col>
				<el-col :span="12">
					<!-- 1150代表客户行业字典表 -->
					  <el-form-item label="客户行业" prop="industry">
					  <el-select v-model="ruleForm.industry" placeholder="请选择客户行业">
					  <el-option v-for="item in indu" :key="item.value" :label="item.label" :value="item.value"></el-option>
					  </el-select>
					  </el-form-item>
			</el-row>
		  
		  <el-form-item label="备注" prop="remarks">
			<el-input clearable type="textarea" :rows="3" style="width:515px" placeholder="请输入内容" v-model="ruleForm.remarks"></el-input>
		  </el-form-item>
		</el-form>
		
			<div slot="footer" class="dialog-footer">
				<el-row>
				<el-col :span="8">
					<el-button type="primary"  @click="submitForm('ruleForm')">保存</el-button>
				</el-col>
				<el-col :span="4">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
				</el-col>
				<el-col :span="4">
					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-col>
				</el-row>
				</div>
		</el-dialog>
		<!-- 新建客户END -->
			
			<template>
			  <el-table border :data="tableData3" tooltip-effect="dark" style="width: 100%" @row-click="getDetails">
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column prop="ID" label="ID" width="60" align="center"></el-table-column>
				<el-table-column prop="shortname" label="简称" width="80" align="center"></el-table-column>
				<el-table-column prop="name" label="客户名称" width="150" align="center"></el-table-column>
				<el-table-column prop="superior_client2" label="所有者" width="120" align="center"></el-table-column>
				<el-table-column prop="address" label="地址" align="center"></el-table-column>
				<el-table-column prop="addtime" label="创建日期" width="200" align="center"></el-table-column>
				<el-table-column fixed="right" label="操作" width="150" align="center">
				  <template slot-scope="scope">
				  		<el-tooltip content="Bottom center" placement="bottom">
							<div slot="content">转公海</div>								
							<i class="el-icon-download" @click="updateSea(scope.row.ID)" style="font-size: 17px;"></i>
						</el-tooltip>
		  				<el-tooltip content="Bottom center" placement="bottom">
							<div slot="content">查看</div>								
							<i class="el-icon-document" @click="handleClick(scope.row.ID)" style="font-size: 17px;"></i>
						</el-tooltip>
						<el-tooltip content="Bottom center" placement="bottom">
							<div slot="content">编辑</div>								
							<i class="el-icon-edit" @click="updateClick(scope.row.ID)" style="font-size: 17px;"></i>
						</el-tooltip>
						<el-tooltip content="Bottom center" placement="bottom">
							<div slot="content">新建联系人</div>								
							<i class="el-icon-plus" @click="addContact(scope.row.ID)" style="font-size: 17px;"></i>
						</el-tooltip>
		  				<el-tooltip content="Bottom center" placement="bottom">
							<div slot="content">删除</div>
							<i class="el-icon-delete" style="margin: 0px 10px;font-size: 17px;"  @click="DeleteShow(scope.row.ID)"></i>
						</el-tooltip>
				  </template>
				</el-table-column>
			  </el-table>
			  
			  <!-- 新建联系人 -->
			<el-dialog title="新建联系人" :visible.sync="dialogContact">
			<h3>联系人</h3>
			<hr/>
			<br/>
			<el-form :model="ruleForm4" :rules="rules4" ref="ruleForm4" label-width="100px">
				<div class="smallbox">
				<el-row>
				<el-col :span="12">
					<el-form-item label="姓名" prop="name">
					<el-input v-model="ruleForm4.name"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
				<el-form-item label="对应客户" prop="customer">
					<el-input :disabled="true" v-model="ruleForm4.customer"></el-input>
				</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-col :span="12">
					<el-form-item label="所有者" prop="counterpart" required>
						<el-input :disabled="true" v-model="ruleForm4.counterpart"></el-input>	
					</el-form-item>
				</el-col>
				<el-col :span="12">
				<!-- 性别字典表1004-->
					<el-form-item label="性别" prop="sex">
					<!-- <el-radio-group v-model="ruleForm4.sex"> -->
					<!-- <el-radio v-for="item in sexes" :key="item.value" :label="item.label" :value="item.value"></el-radio> -->
						<el-radio  v-model="ruleForm4.sex" label="1005">男</el-radio>
						<el-radio  v-model="ruleForm4.sex" label="1006">女</el-radio>
					<!-- </el-radio-group> -->
					</el-form-item>
			</el-col>
			</el-row>
			</div>
			
			<div class="smallbox">
			<el-row>
			<el-col :span="12">
					<el-form-item label="联系人分类" prop="catalogue">
					<el-select v-model="ruleForm4.catalogue" placeholder="请选择联系人分类">
					<el-option v-for="item in cata" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				
			</el-row>
			</div>
			
			<br/>
			<h3>联系方式</h3>
			<hr/>
			<br/>
			<div class="smallbox">
			<el-row>
				<el-col :span="12">
				<el-form-item label="电子邮箱" prop="email">
				<el-input v-model.number="ruleForm4.email"/>
			</el-form-item>
			</el-col>
			<el-col :span="12">
					<el-form-item label="移动电话" prop="phone">
					<el-input v-model.number="ruleForm4.phone"/>
					</el-form-item>
				</el-col>
			</el-row>
			
			</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-row>
				<el-col :span="8">
					<el-button type="primary"  @click="submitForm2('ruleForm4')">保存</el-button>
				</el-col>
				<el-col :span="4">
					<el-button @click="dialogContact = false">取 消</el-button>
				</el-col>
				<el-col :span="4">
					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-col>
				</el-row>
				</div>
			</el-dialog>
			<!-- 新建联系人END -->

			  <!-- 删除弹窗 append-to-body  height="50%" center-->
			  <el-dialog title="提示" :visible.sync="dialogDelete" width="30%" center>
				<div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div> 
					<span slot="footer" class="dialog-footer">
						<el-row>
							<el-col :span="12">
								<el-button type="primary" @click="dialogDelete = false" v-on:click="Delete">确定</el-button>
							</el-col>
							<el-col :span="8">
								<el-button @click="dialogDelete = false">取消</el-button>
							</el-col>
						</el-row>
					</span>
			</el-dialog>
			
	  <!-- 编辑客户弹窗 -->
	  <el-dialog title="编辑客户" :visible.sync="dialogFormVisible2">
		<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" >
		<h3>基本信息</h3>
		<hr/>
		<br/>
		<el-row>
			<el-col :span="12">
				<el-form-item label="客户名称" prop="name">
				<el-input :disabled="true" clearable v-model="ruleForm2.name"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="客户简称" prop="shortname">
				<el-input :disabled="true" clearable v-model="ruleForm2.shortname"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		
		<el-row>
			<el-col :span="12">
				<!-- 性别字典表1004-->
				<el-form-item label="性别" prop="sex">
				<!-- <el-radio-group> -->
				<!-- <el-radio v-for="item in sexes" :key="item.value" :label="item.label" :value="item.value"></el-radio> -->
					<el-radio v-model="ruleForm2.sex" label="1005">男</el-radio>
					<el-radio v-model="ruleForm2.sex" label="1006">女</el-radio>
				<!-- </el-radio-group> -->
				</el-form-item>
			</el-col>
		</el-row>
	  
		<br/>
	  	<h3>生命周期</h3>
		<hr/>
		<br/>
		<el-row>
			<el-col :span="12">
				<!-- 1114代表客户来源字典表 -->
				<el-form-item label="客户来源" prop="source">
					<el-select v-model="ruleForm2.source" filterable placeholder="请选择客户来源">
					<el-option v-for="item in sour" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
			  <!-- 1150代表客户行业字典表 -->
			  <el-form-item label="客户行业" prop="industry">
			  <el-select v-model="ruleForm2.industry" placeholder="请选择客户行业">
			  <el-option v-for="item in indu" :key="item.value" :label="item.label" :value="item.value"></el-option>
			  </el-select>
			  </el-form-item> 
			  </el-col>
			</el-row>	
				
	  <el-row>
	  <el-col :span="12">
		  <!-- 1150代表客户行业字典表 -->
		  <el-form-item label="客户种类" prop="ctype">
		  <el-select v-model="ruleForm2.ctype" filterable placeholder="请选择客户种类">
		  <el-option v-for="item in ctypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
		  </el-select>
		  </el-form-item>
	  </el-col>
	  <el-col :span="12">
	  <el-form-item label="客户类型" prop="sort">
			<el-select v-model="ruleForm2.sort" placeholder="请选择客户类型">
			<el-option v-for="item in sorting" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
			</el-form-item>
		</el-col>
	  </el-row>
	  
	 <br/>
  	<h3>商务特征</h3>
	<hr/>
	<br/>
	<el-row>
		<el-col :span="12">
			<el-form-item label="客户阶段" prop="stage">
			<el-select v-model="ruleForm2.stage" placeholder="请选择客户阶段">
			<el-option v-for="item in stageing" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
			</el-form-item>
		</el-col>
		<el-col :span="12">
			<el-form-item label="关系等级" prop="level">
			<el-select v-model="ruleForm2.level" placeholder="请选择关系等级">
			<el-option v-for="item in leveles" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
			</el-form-item>
		</el-col>
	</el-row>
		
		<el-row>
			<el-col :span="12">
				<el-form-item label="信用等级" prop="rating">
				<el-select v-model="ruleForm2.rating" placeholder="请选择信用等级">
				<el-option v-for="item in rats" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="结账方式" prop="checkout">
				<el-select v-model="ruleForm2.checkout" placeholder="请选择结账方式">
				<el-option v-for="item in checkes" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		
	   <el-row>
			<el-col :span="12">
				<el-form-item label="首次签约" prop="sign">
				<el-date-picker v-model="ruleForm2.sign" type="date" placeholder="选择日期"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12">
		  <el-form-item label="备注" prop="remarks">
			<el-input clearable v-model="ruleForm2.remarks"></el-input>
		  </el-form-item>
		  </el-col>
		</el-row>
		
		<br/>
	  	<h3>联系方式</h3>
		<hr/>
		<br/>
	  	<el-row>
	  		<el-col :span="12">
				<el-form-item label="移动电话" prop="phone">
				<el-input clearable v-model.number="ruleForm2.phone"/>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="电子邮箱" prop="email">
				<el-input clearable v-model.number="ruleForm2.email"/>
				</el-form-item>
			</el-col>
		</el-row>
		
		<el-row>
			<el-col :span="12">
				<el-form-item label="地区" prop="area">
				<el-input clearable v-model="ruleForm2.area"></el-input>
				<!-- 级联地区 -->
				<!-- <el-cascader :options="options" v-model="ruleForm2.area" @change="handleChange"></el-cascader> -->
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="地址" prop="address">
						<el-input clearable v-model="ruleForm2.address"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		
	</el-form>
		<div slot="footer" class="dialog-footer">
			<el-row>
			<el-col :span="12">
				<el-button type="primary"  @click="onSubmitupdate()">保存</el-button>
			</el-col>
			<el-col :span="4">
				<el-button @click="dialogFormVisible2 = false">取 消</el-button>
			</el-col>
			</el-row>
		</div>
		</el-dialog>
	
			  <div style="margin-top: 20px">
				<el-button @click="toggleSelection()">取消选择</el-button>
			  </div>
			</template>
			
			<!-- 分页 -->
			<div class="block" style="display: block; float: left; margin-left: 400px;">
                 <el-pagination @current-change="handleCurrentChange" :page-size="pagedata.pageSize" background layout="total,prev, pager, next, jumper" :total="pagedata.total">
                 </el-pagination>
            </div>
		</div>
		
		<script type="text/javascript">
			var Main = {
				data() {
					//验证手机号码
					var checkPhone = (rule, value, callback) => {
					const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
					if (!value) {
					  return callback(new Error('电话号码不能为空'))
					}
					setTimeout(() => {
					  // Number.isInteger是验证数字是否为整数的方法,实际输入的数字总是识别成字符串
					  // 所以在前面加了一个+实现隐式转换
					  if (!Number.isInteger(+value)) {
						callback(new Error('请输入数字值'))
					  } else {
						if (phoneReg.test(value)) {
						  callback()
						} else {
						  callback(new Error('电话号码格式不正确'))
						}
					  }
					}, 100)
				  };
				//检查输入的联系人姓名是否重复，是否为空
					var checkConName = (rule, value, callback) => {
					   if(value==null||value==''){
						   callback(new Error('联系人姓名为必填项'));  
					   }
					   var _this=this;
					 	axios.get("/customer/findByConName",
			           			{
							params:{
								name:value
									}
	           					}
			           			//ajax请求成功的回调函数
			          			).then(function(response){					          				
			           			console.log("回调成功，获取了服务器端返回的值v");
			           			console.log(response.data);//返回id值
			           			console.log(_this.ruleForm.conId);
			           			if(response.data){
			           				if(_this.ruleForm.conId==response.data){
			           					callback();						           					
			           				}else{
							           	 callback(new Error('该联系人已存在，请重新命名'));							           					
			           				}
		           				
			           			}else{
			           				callback();
			           			}
			           	}).catch(function(){
			           	 callback(new Error('查询有误'));
			           	});
					 	
				       };
				  //验证电子邮箱
				  var checkEmail = (rule, value, callback) => {
						const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
						if (!value) {
						  return callback(new Error('邮箱不能为空'))
						}
						setTimeout(() => {
						  if (mailReg.test(value)) {
							callback()
						  } else {
							callback(new Error('请输入正确的邮箱格式'))
						  }
						}, 100)
					}
				  return {
					  //搜索框中的数据
					  options3: [
						  {
				            label: '全部数据',
				            options: [{
				            	label:'全部数据',
				            	value:'7878'
				            	}]						        		
				        	},{
				          label: '客户种类',
				          options: []
				        }, {
				          label: '客户类型',
				          options: []
				        },{
				          label: '客户来源',
				          options: []
				        }],
				        value7: '',
				        //联系人信息
				        ruleForm4: {
							conId:'',//联系人ID
							name: '',
							phone: '',
							counterpart: '',//所有者
							catalogue: '',
							sex:'',
							email:'',
							customer:'',//客户id
						},
				        rules4: {
							name: [
							{ required: true, message:'姓名不能为空', trigger: 'blur' },
							{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
							],
							catalogue: [
							{ required: true, message: '请选择联系人分类', trigger: 'change' }
							],
							email: [
								{ required: true, validator: checkEmail, trigger: 'blur' }
							],
							phone: [
								{ required: true, validator: checkPhone, trigger: 'blur' }
							],
							sex:[
							{ required: true, message: '请选择性别', trigger: 'change' }
							],
						},
					  ruleForm: {
						  name: '',
						  shortname: '',
						  sex: false,
						  email:'',
						  source:'',
						  phone:'',
						  industry:'',
						  remarks:'',
						  client:''
						},
						rules: {
							  name: [
								{ required: true, message: '客户名称不能为空', trigger: 'blur' },
									{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
							  ],
							  shortname: [
									{ required: true, message: '客户简称不能为空', trigger: 'blur' },
									{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
							  ],
							  sex: [
									{ required: true, message: '请选择性别', trigger: 'change' }
							  ],
							  email: [
									{ required: true, validator: checkEmail, trigger: 'blur' }
							  ],
							  phone: [
									{ required: true, validator: checkPhone, trigger: 'blur' }
							  ],
							  source: [
									{required: true, message: '请选择客户来源', trigger: 'change' }
								],
							  industry: [
									{required: true, message: '请选择行业', trigger: 'change' }
							  ],
							  client:[
									{required: true, message: '请输入所有者', trigger: 'change' }
									  ],
							},
							ruleForm2 :{
								  name: '',
								  shortname: '',
								  sex: false,
								  email:'',
								  source:'',
								  phone:'',
								  industry:'',
								  remarks:'',
								  ctype:'',
								  sort:'',
								  stage:'',
								  level:'',
								  rating:'',
								  checkout:'',
								  area:'',
								  address:'',
								  sign:''
								},
							rules2: {
								  name: [
									{ required: true, message: '客户名称不能为空', trigger: 'blur' },
										{ min: 3, max: 5, message: '长度在 3 到 10 个字符', trigger: 'blur' }
								  ],
								  shortname: [
										{ required: true, message: '客户简称不能为空', trigger: 'blur' },
										{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
								  ],
								  sex: [
										{ required: true, message: '请选择性别', trigger: 'change' }
								  ],
								  email: [
										{ required: true, validator: checkEmail, trigger: 'blur' }
								  ],
								  phone: [
										{ required: true, validator: checkPhone, trigger: 'blur' }
								  ],
								  source: [
										{required: true, message: '请选择客户来源', trigger: 'change' }
									],
								  industry: [
										{required: true, message: '请选择行业', trigger: 'change' }
								  ]
								},
					userInfo:'',//所有者名称
					custnameinfo:'',//客户名称
					userinfoid:'',//所有者编号
					custidinfo:'',
					value:'',
					item:'',
					activeIndex: '1',
					activeIndex2: '1',
					dialogFormVisible: false,
					dialogFormVisible2: false,
					dialogFormSelect:false,
					dialogDelete:false,
					dialogContact:false,//新建联系人
					//客户value
					sexes:[],
					sour:[],
					indu:[],
					ctypes:[],
					sorting:[],
					stageing:[],
					leveles:[],
					rats:[],
					checkes:[],
					options:[],//搜索框数据字典数据
					input5:'',
					tableData3:[],/*全部客户*/
					pagedata:[],/*分页数据*/
					pagedatass:[],/*分页数据搜索*/
					tableData: [],
					tableData2: [],
					id:'',//客户id
					//动态所有者信息
					contacts:[],//联系人
					uitemv:[],//所有者（客户经理）
					uosign:[],
					uosigns:[],
					osignloading: false,
					uosign1:[],
					uosigns1:[],
					osignloading1: false,
					uitemvs: [],
					uidloading: false,
					contactes: [],
					tl:[],//时间线获取的数据
					cust:[],//时间线id获取的客户数据
					//联系人字典数据
					cata:[],
					sexes:[],
					//加载所有者
					ID:'',
					id:'',//联系人id
					gdID: '',
					//动态所有者信息
					contacts:[],//联系人
					uitemv:[],//所有者（客户经理）
					uosign:[],
					uosigns:[],
					osignloading: false,
					uosign1:[],
					uosigns1:[],
					osignloading1: false,
					uitemvs: [],
					uidloading: false,
					contactes: [],
				  };
				},
				created:function () {
					//全部客户第一页显示
					var _self = this;
					$.ajax({
	                      type: "post",
	                      url: "/customer/customerPage",
	                      data: {},
	                      success: function (sdata) {
	                    	  console.log("页数打印*****："+sdata);
	                    	  _self.tableData3=sdata.list;
	                          _self.pagedata=sdata;
	                      }
	                });
				},
				methods: {
					/*保存联系人信息*/
					submitForm2(formName){
						var _this=this;
						this.$refs[formName].validate((valid) => {
							if (valid) {
							//alert('submit!');
							console.log('submit!');
				    	    var obj = {};
							var _this=this;
							this.ruleForm4.customer=_this.custidinfo;
							this.ruleForm4.counterpart=this.userinfoid;
							console.log("idoooo:"+this.ruleForm4.customer);
							var ruleForm4 = this.ruleForm4;
							//post提交数据
							axios.post('/customer/newContacts',
									//参数转换
									Qs.stringify({'name':_this.ruleForm4.name,'customer':this.ruleForm4.customer,
										'counterpart':this.ruleForm4.counterpart,'catalogue':_this.ruleForm4.catalogue,
										'sex':_this.ruleForm4.sex,'phone':_this.ruleForm4.phone,
										'email':_this.ruleForm4.email},{arrayFormat:'brackets'})
									//ajax请求成功的回调函数
							).then(function(v){
								console.log("回调成功，获取了服务器端返回的值v");
								console.log(v);
								_this.dialogContact=false;
								_this.restaurants=v.data;
				           		_this.$notify({
				           	          title: '添加联系人成功',
				           	          type: 'success',
				           	       	  duration:2000
				           	        });
								showAtRight('/customer/customerInfo2');
							}).catch(function(){
								console.log("出错了！");
							});
							showAtRight('/customer/customerInfo2');
							} else {
							console.log('error submit!!');
							return false;
							}
						});
					},
					//获取表格里面的数据
					getDetails(row){
				        console.log(row);//此时就能拿到整行的信息
				        console.log("所有者姓名："+this.userInfo);
				        this.ruleForm4.customer=row.name;
				        this.ruleForm4.counterpart=row.superior_client2;
				        this.userinfoid=row.client;
				        this.custidinfo=row.ID;
				      },
					/* 新建联系人 */
					addContact(row){
						var _this=this;
						_this.dialogContact = true;
					},
					/*客户分页跳转*/
					handleCurrentChange(page){
						var _self=this;
						console.log("页数打印："+page);
		                $.ajax({
		                      type: "post",
		                      url: "/customer/customerPage",
		                      data: {pageNum:page,pageSize:5},
		                      success: function (sdata) {
		                    	  console.log("页数打印*****："+sdata);
		                    	  _self.tableData3=sdata.list;
		                          _self.pagedata=sdata;
		                          //_self.pagedatass=sdata;
		                          /* if(sdata){
	                    		  	
		                    	  } */
		                      }
		                });
					},
					//模糊查询客户姓名
					inputCustname(input5){
						var _this=this;
						console.log("点击搜索："+_this.input5);
						axios.get('/customer/custLike?input5='+(_this.input5),
								//Qs.stringify({'value7':_this.value7},
								{arrayFormat: 'brackets'}
			           			//ajax请求成功的回调函数
			          			).then(function(response){					          				
			           			console.log("回调成功，获取了服务器端返回的值v");
			           			_this.tableData3=response.data.list;
			           			_this.pagedata=response.data;
			           		_this.restaurants=response.data;
			           	}).catch(function(){
			           		console.log("显示客户初始化数据出错了");
			           	});
					},
					//公海
					internalSea(){
						showAtRight('/customer/internationalWaters');
					},
					//选中下拉框获取数据
					getValue(){
						var _this=this;
						console.log("搜索数据："+_this.value7);
						axios.get('/customer/selectByCondition?value7='+(_this.value7),
								//Qs.stringify({'value7':_this.value7},
								{arrayFormat: 'brackets'}
			           			//ajax请求成功的回调函数
			          			).then(function(response){					          				
			           			console.log("回调成功，获取了服务器端返回的值v");
			           			//_this.tableData3=response.data.listcust;
			           			_this.tableData3=response.data.list;
			           			_this.pagedata=response.data;
			           			//_self.tableData3=sdata.list;
		                        //_self.pagedata=sdata;
			           		_this.restaurants=response.data;
			           	}).catch(function(){
			           		console.log("显示客户初始化数据出错了");
			           	});	//这个是数据的初始化 
					},
					//添加客户
					addCustomer(){
						var _this=this;
						  axios.post("/sales/prosale/addOrderpage",
						  		//参数转换
						  		//ajax请求成功的回调函数
						  		).then(function(v){					          				
						  		console.log("回调成功，获取了服务器端返回的值v");
						  		console.log(v.data.contact);
						  		//将数据装换成界面显示
								_this.uosigns= v.data.contact.map(item => {
							        return { value: item.ID, label: item.name };
							      });
								_this.uosign=_this.uosigns;
								_this.uosigns1= v.data.contact.map(item => {
							        return { value: item.ID, label: item.name };
							      });
								_this.contactes=v.data.contact;
								_this.uitemvs= v.data.userAll.map(item => {
							        return { value: item.ID, label: item.name };
							      });
								_this.uitemv=_this.uitemvs;
								  _this.uosign1=_this.uosigns1;
								console.log(_this.uitemvs);
								_this.optionspay=v.data.opay;
								_this.options=v.data.otype;
								_this.dialogFormVisible = true;
						  }).catch(function(){
							  console.log("信息出错了");
						  });							 
					   },
					//加载界面所有者
					   uidremoteMethod(query) {
						    var _this=this;
					        if (query !== '') {
					          this.uidloading = true;
					          setTimeout(() => {
					            this.uidloading = false;
					            this.uitemv = _this.uitemvs.filter(item => {
					              return item.label.toLowerCase()
					                .indexOf(query.toLowerCase()) > -1;
					            });
					          }, 200);
					        } else {
					          this.uosign = [];
					        }
					      },
					      uitemvto(){
							  	var _this=this;
							  	 _this.uitemv=_this.uitemvs;
							  },
							  handleChange(value) {
							        console.log(value);
							      },
				    //这个是列表的选择事件
					  handleSelect(item) {
					  		var contacts=[{con:item.label2,conlabel:item.conName}];
					        console.log("item:"+item.conName);
					        this.contacts=contacts;	
					        this.gdID=item.label1;
					      },
					loadAll(){
						//alert(this.customer);
						var _this=this;
						axios.get("/sales/abroadsaleCustName",
					    {
					       	params: {
							custName:this.customer
					      }
					       	}
					//ajax请求成功的回调函数
					).then(function(response){					          				
				       	console.log("回调成功，获取了服务器端返回的值v");
				       	console.log(response.data);					           		
				       	_this.restaurants=response.data;
				       	}).catch(function(){
				       		console.log("显示客户初始化数据出错了");
				       	});	//这个是数据的初始化
				      },
				    //这个是显示查询的数据
					  querySearchAsync(queryString, cb) {
				    	  var restaurants = this.restaurants;				       
					         var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;	
					         clearTimeout(this.timeout);
					         this.timeout = setTimeout(() => { 
						        	cb(this.restaurants);
						        }, 3000 * Math.random());							       
						         if(queryString==''){					       
						         	this.customer=null;
						         	this.loadAll();
						  			var restaurants = this.restaurants;				       
						  			var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;	
						  			// alert( cb);
						  			clearTimeout(this.timeout);
						  			this.timeout = setTimeout(() => {
						  			cb(this.restaurants);
						  			}, 3000* Math.random());	
						         }
						       },
						     //这个是根据输入的内容筛选数据
							    createStateFilter(queryString) {
							     	  console.log("queryString2:"+queryString);
							     	  if(queryString!=null&&queryString!=" "){
							     		  this.customer=queryString;				    		  
							     	  }else{
							     		  this.customer=null; 
							     	  }					    	 
							     	  console.log("customer:"+this.customer);
							     	this.loadAll();
							         return (state) => {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};
							       },
							       //客户信息修改方法
							       onSubmitupdate() {
				      					var _this=this;
				      					console.log('submit!');
				      					var i=" ";
							    	    var obj = {}; 
							    	  //客户性别
										if(_this.ruleForm2.sex!=null&&_this.ruleForm2.sex!=''){
								    	    obj = this.sexes.find((a)=>{
									    	      return a.label ===_this.ruleForm2.sex; 
									    	    });
									    	   if(obj!=null){
										    	    _this.ruleForm2.sex=obj.value;
									    }
										}else{
											_this.ruleForm2.sex='';
										}
							    	    console.log("客户性别:"+_this.ruleForm2.sex);
										//客户来源
										if(_this.ruleForm2.source!=null&&_this.ruleForm2.source!=''){
								    	    obj = this.sour.find((a)=>{
									    	      return a.label ===_this.ruleForm2.source; 
									    	    });
									    	   if(obj!=null){
										    	    _this.ruleForm2.source=obj.value;
									    }
										}else{
											_this.ruleForm2.source='';
										}
							    	    console.log("客户来源:"+_this.ruleForm2.source);
							    	  //客户类型
										if(_this.ruleForm2.sort!=null&&_this.ruleForm2.sort!=''){
								    	    obj = this.sorting.find((a)=>{
									    	      return a.label ===_this.ruleForm2.sort; 
									    	    });
									    	   if(obj!=null){
										    	    _this.ruleForm2.sort=obj.value;
									    }
										}else{
											_this.ruleForm2.sort='';
										}
							    	    console.log("客户类型:"+_this.ruleForm2.sort);
							    	  //客户种类
										if(_this.ruleForm2.ctype!=null&&_this.ruleForm2.ctype!=''){
								    	    obj = this.ctypes.find((a)=>{
									    	      return a.label ===_this.ruleForm2.ctype; 
									    	    });
									    	   if(obj!=null){
										    	    _this.ruleForm2.ctype=obj.value;
									    }
										}else{
											_this.ruleForm2.ctype='';
										}
							    	    console.log("客户种类:"+_this.ruleForm2.ctype);
							    	  //客户阶段
										if(_this.ruleForm2.stage!=null&&_this.ruleForm2.stage!=''){
								    	    obj = this.stageing.find((a)=>{
									    	      return a.label ===_this.ruleForm2.stage; 
									    	    });
									    	   if(obj!=null){
										    	    _this.ruleForm2.stage=obj.value;
									    }
										}else{
											_this.ruleForm2.stage='';
										}
							    	    console.log("客户阶段:"+_this.ruleForm2.stage);
							    	  //关系等级
										if(_this.ruleForm2.level!=null&&_this.ruleForm2.level!=''){
								    	    obj = this.leveles.find((a)=>{
									    	      return a.label ===_this.ruleForm2.level; 
									    	    });
									    	   if(obj!=null){
										    	    _this.ruleForm2.level=obj.value;
									    }
										}else{
											_this.ruleForm2.level='';
										}
							    	    console.log("关系等级:"+_this.ruleForm2.level);
							    	  //信用等级
										if(_this.ruleForm2.rating!=null&&_this.ruleForm2.rating!=''){
								    	    obj = this.rats.find((a)=>{
									    	      return a.label ===_this.ruleForm2.rating; 
									    	    });
									    	   if(obj!=null){
										    	    _this.ruleForm2.rating=obj.value;
									    }
										}else{
											_this.ruleForm2.rating='';
										}
							    	    console.log("信用等级:"+_this.ruleForm2.rating);
							    	  //结账方式
										if(_this.ruleForm2.checkout!=null&&_this.ruleForm2.checkout!=''){
								    	    obj = this.checkes.find((a)=>{
									    	      return a.label ===_this.ruleForm2.checkout; 
									    	    });
									    	   if(obj!=null){
										    	    _this.ruleForm2.checkout=obj.value;
									    }
										}else{
											_this.ruleForm2.checkout='';
										}
							    	    console.log("结账方式:"+_this.ruleForm2.checkout);
							    	  //行业
										if(_this.ruleForm2.industry!=null&&_this.ruleForm2.industry!=''){
								    	    obj = this.indu.find((a)=>{
									    	      return a.label ===_this.ruleForm2.industry; 
									    	    });
									    	   if(obj!=null){
										    	    _this.ruleForm2.industry=obj.value;
									    }
										}else{
											_this.ruleForm2.industry='';
										}
							    	    console.log("行业:"+_this.ruleForm2.industry);
							    	    console.log("客户id:"+_this.id);
				      					 axios.post('/customer/updateCustomer',{
				      						custId:this.id,
			      							custName:this.ruleForm2.name,
			      							custShortname:this.ruleForm2.shortname,
			      							custTel:this.ruleForm2.phone,
			      							custEmail:this.ruleForm2.email,
			      							custSex:this.ruleForm2.sex,
			      							custSource:this.ruleForm2.source,
			      							industry:this.ruleForm2.industry,
			      							custType:this.ruleForm2.ctype,
			      							custSort:this.ruleForm2.sort,
			      							firstSigning:this.ruleForm2.sign,
			      							custStage:this.ruleForm2.stage,
			      							relationLevel:this.ruleForm2.level,
			      							creditRating:this.ruleForm2.rating,
			      							checkout:this.ruleForm2.checkout,  
			      							custArea:this.ruleForm2.area,
			      							custAddress:this.ruleForm2.address,
			      							remarks:this.ruleForm2.remarks
				      						},
				      						{
				                              transformRequest:[
				                                      function(data){
				                                          let params = '';
				                                          for(let index in data){
				                                              params +=index+'='+data[index]+'&';
				                                          }
				                                          return params;
				                                      }
				                              ]
				                          }).then(v=>{
				                        	  _this.dialogFormVisible2=false;
						      						_this.restaurants=v.data;
									           		_this.$notify({
									           	          title: '修改客户成功',
									           	          type: 'success',
									           	       	  duration:2000
									           	        });
				      								  }).catch(error=>{
				      									console.log("出错了");
				      								 });
				      					showAtRight('/customer/customerInfo2'); 
				      				},
					//查看客户时间线		  
					handleClick(row){
				      	window.open('/customer/timeline?custid='+row);
					},
					//转公海
					updateSea(row){
						var _this=this;
						console.log("这是转公海获取到的客户id："+row);
						//alert(row);
						_this.id=row;
						axios.get("/customer/updateSea",
			           			//ajax请求成功的回调函数
			           			{
									params:{
										ID:_this.id
									}
			           			}
			          			).then(function(response){					          				
			           			console.log("回调成功，获取了服务器端返回的值v");
			           			console.log(response);		
			           		_this.restaurants=response.data;
			           		_this.$notify({
			           	          title: '已转移到公海',
			           	          type: 'success',
			           	       	  duration:2000
			           	        });
			           	}).catch(function(){
			           		_this.$notify({
			           	          title: '已转移到公海',
			           	          type: 'success',
			           	       	  duration:2000
			           	        });
			           		//alert("转移失败！");
			           	});	//这个是数据的初始化
						showAtRight('/customer/customerInfo2');
					},
					//编辑客户
					updateClick(row){
						var _this=this;
						var updateSource=this;
						this.dialogFormVisible2=true;
						//alert(row);
						console.log("这是编辑客户的id："+row);
						_this.id=row;
						axios.post("/customer/selectOne",
							Qs.stringify( {
						   			'custId':row,
							   },{arrayFormat: 'brackets'}) 
							//ajax请求成功的回调函数
						).then(function(v) {
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v.data);
							//传值
							updateSource.ruleForm2.name=v.data.name;
							updateSource.ruleForm2.shortname=v.data.shortname;
							updateSource.ruleForm2.phone=v.data.phone;
							updateSource.ruleForm2.email=v.data.email;
							updateSource.ruleForm2.sex=v.data.sex+'';
							updateSource.ruleForm2.source=v.data.sour;
							updateSource.ruleForm2.industry=v.data.ind;
							updateSource.ruleForm2.ctype=v.data.types;
							updateSource.ruleForm2.sort=v.data.sorts;
							updateSource.ruleForm2.sign=v.data.signing;
							updateSource.ruleForm2.stage=v.data.stages;
							updateSource.ruleForm2.level=v.data.levels;
							updateSource.ruleForm2.rating=v.data.ratings;
							updateSource.ruleForm2.checkout=v.data.checks;  
							updateSource.ruleForm2.area=v.data.area;
							updateSource.ruleForm2.address=v.data.address;
							updateSource.ruleForm2.remarks=v.data.remarks;
						})/* .catch(function() {
						console.log("出错了");
						} )*/;
					},
					//删除客户
					DeleteShow(row) {
						//alert(row);
						console.log("这是删除客户的id："+row);
						this.custId=row;
						this.dialogDelete=true;
					},
					Delete(){
						console.log("删除客户的id："+this.custId);
						var _this=this;
						axios.get("/customer/deleteCustomer",
			           			//ajax请求成功的回调函数
			           			{
									params:{
										ID:this.custId
									}
			           			}
			          			).then(function(response){					          				
			           			console.log("回调成功，获取了服务器端返回的值v");
			           			console.log(response.data);					           		
			           		_this.restaurants=response.data;
			           		_this.$notify({
			           	          title: '删除成功',
			           	          type: 'success',
			           	       	  duration:2000
			           	        });
			           		showAtRight('/customer/customerInfo2');
			           	}).catch(function(){
			           		console.log("删除失败！");
			           	});	//这个是数据的初始化
				      },
					
					//弹窗(添加客户信息)
					submitForm(formName) {
						var _this=this;
						this.$refs[formName].validate((valid) => {
						  if (valid) {
							  console.log('submit!');
							
							//post提交数据
							axios.post('/customer/addCustomer',
									//参数转换
									Qs.stringify(this.ruleForm,{arrayFormat:'brackets'})
									//params:
										//ajax请求成功的回调函数
							).then(function(v){
								console.log("回调成功，获取了服务器端返回的值v");
								console.log(v);
								_this.dialogFormVisible=false;
								_this.restaurants=v.data;
								_this.$notify({
				           	          title: '添加客户成功',
				           	          type: 'success',
				           	       	  duration:2000
				           	        });
								showAtRight('/customer/customerInfo2');
							}).catch(function(){
								console.log("出错了！");
							});
						  } else {
							console.log('error submit!!');
							return false;
						  }
						});
					  },
					  resetForm(formName) {
						this.$refs[formName].resetFields();
					  },
					
					handleSelect(key, keyPath) {
					console.log(key, keyPath);
					if (key == 1) {

					}
					},
				  
				  toggleSelection(rows) {
					if (rows) {
					  rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					  });
					} else {
					  this.$refs.multipleTable.clearSelection();
					}
				  },
				  //加载数据字典
				},mounted:function(){
					var _this=this;
					axios.get("/customer/customerDictInfo",
		           			//ajax请求成功的回调函数
		          			).then(function(response){					          				
		           			console.log("回调成功，获取了服务器端返回的值v");
		           			console.log(response.data);
		           			_this.sexes=response.data[0];
		           			_this.ctypes=response.data[1];
		           			_this.sorting=response.data[2];
		           			_this.sour=response.data[3];
		           			_this.stageing=response.data[4];
		           			_this.leveles=response.data[5];
		           			_this.rats=response.data[6];
		           			_this.checkes=response.data[7];
		           			_this.indu=response.data[8];
		           			//搜索框的动态值
		           			_this.options3[1].options=response.data[1];
		           			_this.options3[2].options=response.data[2];
		           			_this.options3[3].options=response.data[3];
		           			console.log(_this.sexes);
		           	}).catch(function(){
		           		console.log("加载字典信息出错了");
		           	});	
					axios.get("/customer/contactDictInfo",
		           			//ajax请求成功的回调函数
		          			).then(function(response){					          				
		           			console.log("回调成功，获取了服务器端返回的值v");
		           			console.log(response.data);
		           			_this.cata=response.data[0];
		           			_this.sexes=response.data[1];
		           			console.log(_this.sexes);
		           	}).catch(function(){
		           		console.log("加载字典信息出错了");
		           	});	
				}
			  }
		var Ctor = Vue.extend(Main);
		new Ctor().$mount('#app');
		</script>
	</body>
</html>
